<template>
  <view class="content">
    <!-- 头部选项卡 -->
    <view class="tabs">
      <view 
        v-for="tab in tabs" 
        :key="tab.value" 
        class="tab-item" 
        :class="{active: activeTab === tab.value}"
        @click="changeTab(tab.value)"
      >
        {{tab.label}}
      </view>
    </view>
    
    <!-- 订单列表 -->
    <view v-if="filteredOrders.length > 0">
      <view v-for="(o, index) in filteredOrders" :key="index" class="order-item">
        <view class="order-info">
          <view class="order-status" :style="{color: getStatusColor(o.status)}">
            状态: {{ o.status || '未知状态' }}
          </view>
          
          <!-- 商品列表 -->
          <view class="cc">
            <view class="shop-name">{{ getShopName(o.items) }}</view>      
            <view v-for="(item, itemIndex) in o.items" :key="itemIndex" class="order-item-product">
              <img :src="item.imgUrl" class="product-img">
              <view class="product-name">{{ item.name }}</view>
              <view class="product-price">单价: ￥{{ item.price.toFixed(2) }}</view>
              <view class="product-quantity">数量: {{ item.quantity || 1 }}</view>
            </view>
          
            <view class="other">
               <view>总价：￥{{ calculateTotal(o.items).toFixed(2) }}</view>
               <view>时间：{{ o.createTime || '暂无时间信息' }}</view>
               <view class="total-quantity">共 {{ calculateShopTotalQuantity(o.items) }} 件</view>
               <view class="button">
                 <button v-if="o.status==='进行中'" @click="confirmReceipt(o)" class="confirm-btn">确认收货</button>
                 <button v-if="o.status==='进行中'" @click="cancelOrder(o)" class="cancel-btn">取消订单</button>

               </view>
            </view>
            

           
          </view>
          
        </view>
      </view>
    </view>
    
    <!-- 无订单提示 -->
    <view v-else class="no-orders">
      <text>暂无订单数据</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '订单',
      orders: [],
      activeTab: 'all', // 当前选中的选项卡
      tabs: [
        { label: '全部', value: 'all' },
        { label: '进行中', value: '进行中' },
        { label: '已完成', value: '已完成' },
        { label: '已取消', value: '已取消' }
      ]
    };
  },
  computed: {
    // 根据当前选项卡筛选订单
    filteredOrders() {
      if (this.activeTab === 'all') {
        return this.orders;
      }
      return this.orders.filter(order => order.status === this.activeTab);
    }
  },
  onShow() {
    this.fetch();
  },
  methods: {
    // 获取订单数据的方法
    fetch() {
      uni.request({
        url: `http://localhost:3000/orders`,
        success: (res) => {
          this.orders = res.data;
        },
        fail: (err) => {
          console.error('获取订单数据失败', err);
        }
      });
    },
    // 切换选项卡
    changeTab(tab) {
      this.activeTab = tab;
    },
    // 计算订单总价
    calculateTotal(items) {
      return items.reduce((total, item) => {
        const quantity = item.quantity || 1;
        return total + (item.price * quantity);
      }, 0);
    },
    // 获取超市名称
    getShopName(items) {
      return items[0]?.shopName || '未知超市';
    },
    // 计算商品总数量
    calculateShopTotalQuantity(items) {
      return items.reduce((total, item) => {
        return total + (item.quantity || 1);
      }, 0);
    },
    // 获取状态颜色
    getStatusColor(status) {
      switch(status) {
        case '进行中': return '#1890ff'; // 蓝色
        case '已完成': return '#52c41a'; // 绿色
        case '已取消': return '#f5222d'; // 红色
        default: return '#666'; // 默认灰色
      }
    },
        // 确认收货方法
    confirmReceipt(order) {
      uni.showModal({
        title: '提示',
        content: '确认已收到商品吗？',
        success: (res) => {
          if (res.confirm) {
            // 更新订单状态为"已完成"
            uni.request({
              url: `http://localhost:3000/orders/${order.id}`,
              method: 'PATCH',
              data: { status: '已完成' },
              success: () => {
                uni.showToast({
                  title: '确认收货成功',
                  icon: 'success'
                });
                // 刷新订单列表
                this.fetch();
              },
              fail: (err) => {
                console.error('更新订单状态失败', err);
              }
            });
          }
        }
      });
    },
     cancelOrder(order) {
      uni.showModal({
        title: '提示',
        content: '确定要取消此订单吗？',
        success: (res) => {
          if (res.confirm) {
            // 更新订单状态为"已取消"
            uni.request({
              url: `http://localhost:3000/orders/${order.id}`,
              method: 'PATCH',
              data: { status: '已取消' },
              success: () => {
                uni.showToast({
                  title: '订单已取消',
                  icon: 'success'
                });
                // 刷新订单列表
                this.fetch();
              },
              fail: (err) => {
                console.error('取消订单失败', err);
              }
            });
          }
        }
      });
    }

    
  }
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.cc{
  display: flex;
  flex-direction: column;
}
/* 选项卡样式 */
.tabs {
  display: flex;
  margin-bottom: 15px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #1aad19;
  font-weight: bold;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 3px;
  background-color: #1aad19;
  border-radius: 3px;
}

/* 订单项样式 */
.order-item {
  margin-bottom: 15px;
  background-color:rgb(146, 193, 248);
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.order-info {
  padding: 15px;
}

.order-status {
  font-size: 14px;
  margin-bottom: 10px;
}

.order-item-product {
  display: flex;
  flex-direction: row;
  margin-bottom: 15px;
  padding: 5px;
  border: 1px solid #6d7272;
  border-radius: 5px;
  align-items: center;
}

.product-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  /* margin-bottom: 10px; */
  display: flex;
  align-items: center;
}

.product-name {
  font-weight: bold;
  margin-bottom: 5px;
  margin-left: 20px;
}

.product-price, .product-quantity{
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
  margin-left: 20px;
}
.button{
  display: flex;
  flex-direction: row;
  justify-content: start;
}
.other {
  margin-top: 0px;
  padding-top: 10px;
  margin-left: 30px;
  border-top: 1px solid #181717;
}

.shop-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.total-quantity {
  color: #666;
  font-size: 12px;
}

.no-orders {
  text-align: center;
  padding: 50px 0;
  color: #999;
}

.confirm-btn {
  margin-top: 10px;
  background-color: #1aad19;
  color: white;
  /* padding: 8px 15px; */
  border-radius: 5px;
  font-size: 8px;
  border: none;
height: 20px;
  width: 70px;}
.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}


/* 取消按钮样式 */
.cancel-btn {
  margin-top: 10px;
  background-color: red;
  color: white;
  /* padding: 8px 15px; */
  border-radius: 5px;
  font-size: 8px;
  border: none;
  height: 20px;
  width: 70px;
}
</style>